<template>
  <Modal v-model="visible" :closeOnMask="false">
    <div slot="header">{{title}}</div>
    <div class="model-body" :style="`width:${width}px`">
      <component ref="mdeol" v-bind:is="content" v-model="value"></component>
    </div>
    <div slot="footer">
      <Button color="primary" @click="handleOk">确认</Button>
      <Button @click="handleCancel">关闭</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '操作窗口'
    },
    width: {
      type: [Number, String],
      default: 800
    },
    content: [Object, Function],
    value: [Array, Object, Number, String]
  },
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: true,
      confirmLoading: false
    };
  },
  watch: {
    value: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function (newV, oldV) {
        this.$emit('input', newV);
      }
    }
  },
  async mounted() {

  },
  methods: {
    showModal() {
      this.visible = true;
    },
    async handleOk(e) {
      try {
        let returned = await this.$refs.mdeol.affirm(this);
        if (returned) {
          this.handleCancel();
        }
      } catch (error) {
        console.error('事件不存在', error);
      }
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    }

  }
};

</script>
